<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Aini
  Date: 2017/11/13
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>CourseDetail</title>

    <c:import url="/WEB-INF/jsp/frontend/script.jsp"/>

    <c:import url="/WEB-INF/jsp/frontend/head.jsp" />

     <%--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">--%>

    <%--<link rel="stylesheet" href="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-beta.1.css" type="text/css">--%>

    <link rel="stylesheet" href="<spring:url value="/css/courseDetail.css"/>" />

</head>
<body>
<div class="head">

    <c:import url="/WEB-INF/jsp/frontend/header.jsp"/>
</div>
<div class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center display-3 text-primary">Deep Learning
                    <br>Specialization</h1>
                <h3 class="text-title">Master deeplearning， and break into AI

                    <br> </h3>
            </div>
        </div>
    </div>
</div>
<div class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <ul class="list-group">
                    <li class="list-group-item"><a>课程介绍</a></li>
                    <li class="list-group-item"><a>导师介绍</a></li>
                    <li class="list-group-item"><a>常见问题解答</a></li>
                    <li class="list-group-item BaoMingItem"><a>
                        <div class="BaoMing">
                            <div style="width: 80%;text-align: center;font-size: 24px;color: white;">报名</div>
                            <br>
                            <div style="width: 80%;text-align: center;font-size: 8px;color: white;">于Nov 02开始</div>
                        </div>
                    </a></li>
                </ul>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">课程介绍</div>
                    <div class="card-body">
                        <p class=" p-y-1">If you want to break into AI, this Specialization will help you.&nbsp;If you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization
                            will help you
                            <br>
                            <br>If you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization
                            will help youIf you want to break into AI, this Specialization will help you
                            <br>
                            <br>
                            <br>If you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization
                            will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help youIf you want to break into AI, this Specialization will help you</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">导师介绍</div>
                    <div class="card-body">
                        <div class="TeacherIntro">
                            <div class="TeacherPic"></div>
                            <p class="TeacherIntroText">
                                <a herf="">蔡恒进</a>:005年从美国归国后，受聘于武汉大学国际软件学院，从事服务科学、人工智能、金融信息工程等领域的研究和教学工作。特别注重激发和培养学生的创新思维，指导学生参加国内外大赛赢得了50余奖项。
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">常见问题解答</div>
                    <div class="card-body">
                        <div class="accordion" id="accordion-115714">
                            <div class="accordion-group">
                                <div class="accordion-heading"><a class="accordion-toggle collapsed" data-parent="#accordion-115714" data-toggle="collapse" href="#accordion-element-545903">什么是深度学习？</a></div>

                                <div class="accordion-body collapse" id="accordion-element-545903" style="height: 0px;">
                                    <div class="accordion-inner">我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊</div>
                                </div>
                            </div>

                            <div class="accordion-group">
                                <div class="accordion-heading"><a class="accordion-toggle collapsed" data-parent="#accordion-115714" data-toggle="collapse" href="#accordion-element-545973">什么是深度学习？</a></div>

                                <div class="accordion-body collapse" id="accordion-element-545973" style="height: 0px;">
                                    <div class="accordion-inner">我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊</div>
                                </div>
                            </div>

                            <div class="accordion-group">
                                <div class="accordion-heading"><a class="accordion-toggle collapsed" data-parent="#accordion-115714" data-toggle="collapse" href="#accordion-element-545977">什么是深度学习？</a></div>

                                <div class="accordion-body collapse" id="accordion-element-545977" style="height: 0px;">
                                    <div class="accordion-inner">我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊</div>
                                </div>
                            </div>

                            <div class="accordion-group">
                                <div class="accordion-heading"><a class="accordion-toggle collapsed" data-parent="#accordion-115714" data-toggle="collapse" href="#accordion-element-546973">什么是深度学习？</a></div>

                                <div class="accordion-body collapse" id="accordion-element-546973" style="height: 0px;">
                                    <div class="accordion-inner">我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊我不知道啊</div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-2" id="video_container" class="container">
                <div vidSrc="videos/panda.mp4" class="text-trigger htmlvid">
                    <a onclick="showVideo()"><img src="images/1.1.jpg" class="CourseVideoImg"></a>
                    <img src="images/2606.png" class="ActivateVideoLogo">
                </div>
            </div>
        </div>
    </div>
</div>
<video controls="controls" class="videos" id="video1">
    <source src="images/videos/panda.mp4" type="video/mp4">
</video>
<a href="javascript:closeShadow();" onclick="closeShadow()"><div id="shadow"></div></a>
<script type="text/javascript">
    var video1 =  document.getElementById("video1");

    function closeShadow(){
        var oShadow = document.getElementById("shadow");
        var video1 =  document.getElementById("video1");
        oShadow.style.display = "none";
        video1.style.transform = "scale(0,0)";
        video1.style.transition = "transform 0.2s";
        video1.pause();
    }
    function showVideo(){
        var oShadow = document.getElementById("shadow");
        var video1 =  document.getElementById("video1");
        var sHeight=document.documentElement.scrollHeight;
        var sWidth=document.documentElement.scrollWidth;
        oShadow.style.height=sHeight+"px";
        oShadow.style.width=sWidth+"px";
        oShadow.style.display = "block";
        video1.style.opacity = "1";
        video1.style.transform = "scale(1.2,1.2)"
        video1.style.transition = "transform 1s";
        video1.play();
    }
</script>

<script src="<spring:url value="/js/bootstrap-collapse.js"/>"></script>
</body>
</html>
